
<template>
  <div class="sign">
    <!-- 头部 -->
    <header @click="sign">
      <div class="head">
        <div class="logoBox">
          <div v-if="isLogin">
            <img
              v-if="phone=='18818989580'"
              class="logoimg"
              src="@/assets/img/yingzhixiaoyi.jpg"
              alt
            />
            <img v-else src="@/assets/img/Koala.jpg" alt />
          </div>

          <i class="logo iconfont icon-iconcopy" v-else></i>
        </div>
        <span style="font-size:15px">{{isLogin?(phone=='18818989580'?'影之晓毅':phone):"立即登录"}}</span>
      </div>
    </header>
    <ul class="wealthBox">
      <li class="wealth">
        <span class="num">
          0.00
          <span class="numText">元</span>
        </span>
        <span class="text">余额</span>
      </li>
      <li class="wealth">
        <span class="num">
          0
          <span class="numText">张</span>
        </span>

        <span class="text">苏打卷</span>
      </li>
      <li class="wealth">
        <span class="num">
          0
          <span class="numText">张</span>
        </span>
        <span class="text">现金券</span>
      </li>
    </ul>

    <div style="margin:10px 0;">
      <van-cell-group class="user-group">
        <van-cell title="我的订单" is-link @click="myOrder" />
      </van-cell-group>
      <van-row class="user-links">
        <van-col span="4">
          <van-icon name="pending-payment" />待付款
        </van-col>
        <van-col span="4">
          <van-icon name="records" />待分享
        </van-col>
        <van-col span="4">
          <van-icon name="tosend" />待发货
        </van-col>
        <van-col span="4">
          <van-icon name="logistics" />待收货
        </van-col>
        <van-col span="4">
          <van-icon name="after-sale" />退出售后
        </van-col>
      </van-row>
    </div>

    <section>
      <van-cell-group>
        <van-cell icon="photo-o" title="我的体检" is-link size="20px" />
        <van-cell icon="cash-on-deliver" title="企业服利" is-link />
        <van-cell icon="service-o" title="客服" is-link />
        <van-cell icon="setting-o" title="设置" is-link @click="gosign" />
      </van-cell-group>
    </section>

    <FootBar></FootBar>
  </div>
</template>


<script>
import FootBar from "@/components/Footer";
import { log } from "util";
export default {
  data() {
    return {
      isLogin: false,
      phone: ""
    };
  },
  name: "myCenter",
  components: {
    FootBar
  },
  methods: {
    sign() {
      if (this.isLogin) {
        this.$router.push("/my/set");
      } else {
        this.$router.push("/login");
      }
    },
    gosign() {
      this.$router.push("/my/set");
    },
    myOrder() {
      this.$router.push("/order/List");
    }
  },
  created() {
    if (this.$store.state.phone) {
      this.isLogin = true;
      this.phone = this.$store.state.phone;
    } else {
      this.isLogin = false;
    }
    // console.log(this.isLogin)
  }
};
</script>

<style lang="less" scoped>
.sign {
  background-color: #f4f4f4;
  height: 100vh;
  width: 100vw;

  header {
    height: 136px;
    background: url(../../../assets/img/mybg.png) no-repeat top;
    background-size: cover;
    display: flex;
    align-items: flex-end;

    .head {
      display: flex;
      align-items: center;
      margin-bottom: 15px;

      .logoBox {
        height: 66px;
        width: 66px;
        background: #ff8462;
        border-radius: 50%;
        overflow: hidden;
        text-align: center;
        line-height: 66px;
        margin: 0 22px;

        .logo {
          font-size: 36px;
          color: white;
        }
      }
    }
  }

  .wealthBox {
    height: 72px;
    background: white;
    font-size: 14px;
    display: flex;
    justify-content: space-around;

    .wealth {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;

      .num {
        color: #2e2f30;
        margin-bottom: 7px;
        font-size: 16px;

        .numText {
          font-size: 12px;
        }
      }

      .text {
        color: #797d82;
      }
    }
  }

  .user {
    &-poster {
      width: 100%;
      height: 53vw;
      display: block;
    }

    &-links {
      padding: 15px 0;
      font-size: 12px;
      text-align: center;
      background-color: #fff;
      display: flex;
      justify-content: space-around;
      .van-icon {
        display: block;
        font-size: 24px;
      }
    }
  }

  .van-cell {
    // height: 44px;
    padding: 10px 15px;
  }

  // 我的订单
  .van-cell--clickable {
    height: 44px;
  }
  // 中部导航
  .van-cell--clickable {
    height: 44px;
    font-size: 15px;
    span {
      margin-left: 8px;
    }
  }

  // 物流
  .user-links {
    height: 79px;
    .van-icon {
      margin-bottom: 10px;
      font-size: 28px;
      font-weight: 200;
    }
    .van-col--4 {
      font-size: 13px;
      color: #797d82;
    }
  }

  // 福利
  section {
    .van-cell--clickable {
      height: 49px;
      // padding: 0px 13px 0px 11px;
      i {
        font-size: 20px;
      }
    }
  }
}
.logoimg {
  width: 70px;
  height: 70px;
}
</style>